<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业二</title>
</head>

<body>
    <div class="data">

    </div>
    
    <script>
        const obj = {
            id: 9,
            uname: 'zs',
            age: 18,
            hobbit: ['抽烟', '喝酒', '烫头'],
            obj2: {
                id: 10,
                uname: "ls",
                age: 28,
                hobbit: ['吃饭', '睡觉', '敲代码']
            }
        }
        // for in 遍历
        // 解构
        let { id: id1, uname: uname1, age: age1, hobbit: { 0: cy, 1: hj, 2: tt }, obj2: { id: id2, uname: uname2, age: age2, hobbit: { 0: cf, 1: sj, 2: qdm } } } = obj
        document.querySelector('div').innerHTML = `
        id:${id1}<br>
        姓名1:${uname1}<br>
        年龄1:${age1}<br>
        爱好1.1:${cy}<br>
        爱好1.2:${hj}<br>
        爱好1.3:${tt}<br>
        id2:${id2}<br>
        姓名2:${uname2}<br>
        年龄2:${age2}<br>
        爱好2.1:${cf}<br>
        爱好2.2:${sj}<br>
        爱好2.3:${qdm}<br>
        `
    </script>
</body>

</html>